import React, { memo, useState, useEffect } from "react";
import { useSelector, shallowEqual } from "react-redux";
import { useHistory } from "react-router-dom";
import Titletag from "@/components/titletag";
import { Pagination, Popconfirm, message } from "antd";
import { Aboutmewrap } from "./style";
import request from "@/service/request";
export default memo(function Aboutme() {
  //发表过的博客
  const [personblog, setPersonblog] = useState([]);
  //收藏的博客
  const [collectionblog, setCollectionblog] = useState([]);
  //我发表的博客页面展示数量
  const [pagesize, setPagesize] = useState(0);
  //收藏博客页数
  const [pagesize1, setPagesize1] = useState(0);
  const history = useHistory();

  const { user } = useSelector(
    (store) => ({
      user: store.userstore.user,
    }),
    shallowEqual
  );
  //获取发表的博客
  useEffect(() => {
    request
      .get(`travel/Personalblog?id=${user.id}`)
      .then((value) => {
        setPersonblog(value);
      })
      .catch((value) => {
        console.log("获取个人发表的博客失败");
      });
    request
      .get(`travel/Getcollection?id=${user.id}`)
      .then((res) => {
        setCollectionblog(res);
      })
      .catch((value) => {
        console.log("获取收藏的博客出错");
      });
  }, [user]);

  //发表的博客页面改动
  const onChange1 = (page) => {
    setPagesize((page - 1) * 4);
  };
  //收藏博客页面改动
  const onChange2 = (page) => {
    setPagesize1((page - 1) * 4);
  };
  //删除发表过的文章
  const deleteblog = (bgid) => {
    request.get(`travel/Deleteone?which=2&bgid=${bgid}`).then((value) => {
      message.success("删除发表的博客成功");
      request.get(`travel/Personalblog?id=${user.id}`).then((value) => {
        setPersonblog(value);
      });
      request
        .get(`travel/Getcollection?id=${user.id}`)
        .then((res) => {
          setCollectionblog(res);
        })
        .catch((value) => {
          console.log("获取收藏的博客出错");
        });
    });
  };
  //删除收藏的文章
  const deletecollection = (bgid) => {
    request
      .get(`travel/Deleteone?which=1&bgid=${bgid}&bloggerid=${user.id}`)
      .then((value) => {
        console.log(value);
        message.success("删除收藏成功");
        request.get(`travel/Getcollection?id=${user.id}`).then((res) => {
          setCollectionblog(res);
        });
      });
  };
  return (
    <Aboutmewrap>
      <div className="header">
        <div className="title">
          <div className="left">关于我</div>
          <div className="right">
            记录我的人生轨迹， 记录我的感动，记录心中那尚未崩坏的部分。
          </div>
        </div>
        <div className="middle">
          <img src={user.aventer} alt="" />
          <div className="name">{user.nickname}</div>
        </div>
        <div className="bottom">
          <div className="left">生日{user.birthday}</div>
          <img
            src="https://s3.bmp.ovh/imgs/2021/11/78a8db2604c921bb.png"
            alt=""
          />
        </div>
      </div>
      <div className="profile">个人简介：{user.profile}</div>

      {/* 我发表过的文章  */}
      <div className="mypub">
        <Titletag
          imp={"我发表的 "}
          other={"文章mes"}
          color={"#38b3d4"}
        ></Titletag>
        <div className="content1">
          {personblog.slice(pagesize, pagesize + 4).map((item, index) => {
            return (
              <div
                className="item"
                key={index}
                onClick={(e) =>
                  history.push(`/home/aesthetic/aesathedetail/${item.bgid}`)
                }
              >
                <img src={item.pic} alt="" />
                <div className="right1">
                  <div className="title">{item.title.slice(0, 6) + "..."}</div>
                  <div className="summary">
                    {item.summary.slice(0, 10) + "..."}
                  </div>
                </div>
                <Popconfirm
                  title="你确定删除这篇文章吗"
                  okText="确定"
                  cancelText="取消"
                  onCancel={(e) => e.stopPropagation()}
                  onConfirm={(e) => {
                    e.stopPropagation();
                    deleteblog(item.bgid);
                  }}
                >
                  <span
                    className="iconfont icon-shanchu"
                    onClick={(e) => {
                      e.stopPropagation();
                    }}
                  ></span>
                </Popconfirm>
              </div>
            );
          })}
        </div>
        {personblog.length > 0 ? (
          <div className="page">
            <Pagination
              pageSize={4}
              onChange={onChange1}
              total={personblog && personblog.length}
            />
          </div>
        ) : (
          <div className="topub">
            <img src="https://www.robohash.org/a" alt="" />
            <div className="topub">
              你还没有发表过博客,去
              <span
                onClick={(e) => {
                  history.push("/home/publog");
                }}
              >
                发表
              </span>
            </div>
          </div>
        )}
      </div>
      {/* 我收藏的文章 */}
      <div className="mycollection">
        <Titletag
          imp={"我收藏的 "}
          other={"文章mes"}
          color={"#38b3d4"}
        ></Titletag>
        <div className="content1">
          {collectionblog.slice(pagesize1, pagesize1 + 4).map((item, index) => {
            return (
              <div
                className="item"
                key={index}
                onClick={(e) =>
                  history.push(`/home/aesthetic/aesathedetail/${item.bgid}`)
                }
              >
                <img src={item.pic} alt="" />
                <div className="right1">
                  <div className="title">{item.title.slice(0, 6) + "..."}</div>
                  <div className="summary">
                    {item.summary.slice(0, 10) + "..."}
                  </div>
                </div>
                <Popconfirm
                  title="你确定删除此收藏吗"
                  okText="确定"
                  cancelText="取消"
                  onCancel={(e) => e.stopPropagation()}
                  onConfirm={(e) => {
                    e.stopPropagation();
                    deletecollection(item.bgid);
                  }}
                >
                  <span
                    className="iconfont icon-shanchu"
                    onClick={(e) => {
                      e.stopPropagation();
                    }}
                  ></span>
                </Popconfirm>
              </div>
            );
          })}
        </div>
        {collectionblog.length > 0 ? (
          <div className="page">
            <Pagination
              pageSize={4}
              onChange={onChange2}
              total={collectionblog && collectionblog.length}
            />
          </div>
        ) : (
          <div className="topub">
            <img src="https://www.robohash.org/a" alt="" />
            <div className="topub">
              你还没有收藏过博客,去
              <span
                onClick={(e) => {
                  history.push("/home");
                }}
              >
                收藏一个
              </span>
            </div>
          </div>
        )}
      </div>
    </Aboutmewrap>
  );
});
